<template>
	<view style="height: 100vh; background: #181818; position: relative; color: #ffffff;">
		<bakc text="配对中" :isReturn="true" textMLeft='margin-left: 150rpx;' />

		<!--uchars 进度条-->
		<view class="schedule">
			<view class="pairing">
				<view>配对中</view>
				<view style="height: 20rpx;"></view>
				<view>{{ progressBar  }}%</view>
			</view>
			<view style="height: 290rpx;"></view>
			<l-circularProgress bgColor='#353535' :boxWidth='220' :boxHeight='220' progressColor="#BE9D5F"
				:lineWidth="13" fontColor="#181818" gradualColor="#7e6840" :percent="progressBar">
			</l-circularProgress>
			<view style="height: 100rpx;"></view>
			<view>请勿离开此页面，否则配对将不成功</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//圆形进度条变量
				progressBar: 0,
				//连接超时时间
				timeOut: 5000, //5秒超时
				isConnectionBleSuccessful: false, //是否连接蓝牙成功
				timeOutTimer: '', //蓝牙连接超时定时器变量 

			}
		},

		//onLoad 初始化
		onLoad() {
			this.progressBarAugment();
			this.createBLEConnection();
		},
		methods: {

			//连接蓝牙
			createBLEConnection() {
				//从vuex中获取到 deviceId
				const deviceId = this.vuex_select_equipment.deviceId;
				let tath = this;
				uni.createBLEConnection({
					deviceId,
					success: res => {
						tath.getBLEDeviceServices(deviceId);
						console.log("连接成功createBLEConnection")
					},
					error: res => {
						console.log("连接失败", res)
					}
				});
			},


			//获取蓝牙的所有服务
			getBLEDeviceServices(deviceId) {
				let that = this;
				setTimeout(() => {
					uni.getBLEDeviceServices({
						deviceId: deviceId,
						success: (res) => {
							//获取到蓝牙的服务id
							let serviceId = res.services[0].uuid;
							//将服务id存储到 vuex_select_equipment 对象中
							this.$set(this.vuex_select_equipment, 'serviceId', serviceId);
							that.getBLEDeviceCharacteristics(deviceId, serviceId); //第五步方法名
						},
					});
				}, 1000);
			},

			//建立连接
			getBLEDeviceCharacteristics(deviceId, serviceId) {
				let _that = this
				uni.getBLEDeviceCharacteristics({
					deviceId: deviceId,
					serviceId: serviceId,
					success: (res) => {
						res.characteristics.forEach(characteristic => {
							if (characteristic.properties.write) {
								//获取到蓝牙的写id
								this.$set(this.vuex_select_equipment, 'writeId', characteristic.uuid);
							}
							if (characteristic.properties.notify) {
								//建立蓝牙连接成功之后的，通信凭证
								_that.updateNotify(deviceId, serviceId, characteristic.uuid);
							}
						})
					},
					fail: (res) => {
						console.log("连接失败", res);
					},
				});
			},


			//监听数据
			updateNotify(deviceId, serviceId, characteristicId) {
				let that = this
				uni.notifyBLECharacteristicValueChange({
					deviceId: deviceId,
					serviceId: serviceId,
					characteristicId: characteristicId,
					state: true,
					success: (res) => {
						//蓝牙连接成功
						this.isConnectionBleSuccessful = true;
					},
					fail: (res) => {
						console.log("失败1--------", res);
					},
				});
			},

			//进度条增加方法
			progressBarAugment() {
				//进度条开始累加
				let time = setInterval(() => {
					//判断蓝牙是否连接成功，只有成功进度条才能到100% 
					if (this.progressBar != 99) {
						this.progressBar++;
					} else if (this.isConnectionBleSuccessful) {
						this.progressBar++;
					}

					//连接成功判断
					if (this.progressBar == 100) {
						//清除连接超时定时器
						clearInterval(this.timeOutTimer);
						//蓝牙连接成功执行方法
						clearInterval(time);
						//跳转到配网页面
						this.routeJump("pages/connectionNetwork/connectionNetwork");
					}
				}, 20)
				//调用蓝牙超时方法
				this.bleConnectionTimeout(time);
			},

			//路由方法
			routeJump(path) {
				uni.$u.route({
					type: 'redirect',
					url: path
				})
			},

			//蓝牙连接超时方法
			bleConnectionTimeout(time) {
				this.timeOutTimer = setTimeout(() => {
					uni.showToast({
						title: '连接超时',
						icon: 'none',
						duration: 2000
					})
					//清空定时器
					clearInterval(time);
					//500毫米后回到选择设备页面
					setTimeout(() => {
						this.routeJump("pages/newPage/newPage");
					}, 500)
				}, this.timeOut)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.schedule {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.pairing {
			position: absolute;
			top: 460rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			z-index: 999999;
		}

		.schedule_text {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
</style>